<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<body>
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="typename" class="col-sm-2 control-label">分类名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="typename" placeholder="图书名称">
                    <button id="insert">分类录入</button>
                </div>
            </div>
        </form>
        <hr/>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="bookname" class="col-sm-2 control-label">图书名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="bookname" placeholder="图书名称">
                </div>
            </div>
            <div class="form-group">
                <label for="type" class="col-sm-2 control-label">分类</label>
                <div class="col-sm-10">
                    <select name="type" id="type">
                        <option th:value="${type.id}" th:each="type : ${types}" th:text="${type.name}"></option>
                    </select>
                </div>
            </div>
        </form>
        <table class="table">
            <thead id="head">
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="body">
                <tr th:each="type : ${types}">
                    <td th:text="${type.id}"></td>
                    <td th:text="${type.name}"></td>
                    <td>
                        <a th:onclick="deleteCate([[${type.id}]])" href="javascript:void(0)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr/>

    </div>
</body>
<script>
    $(function () {
        $("#insert").click(function () {
            $.ajax({
                url:"/category/insert",
                data:{"name":$("#typename").val()},
                type:"post",
                dataType:"json",
                success:function(data){
                    if(data.code==200){
                        alert("录入成功")
                        location.reload();
                    }
                }

            })
            location.href="/book/add";
        })
        $("#type").change(function(){
            $("#body").empty();
            var str = `<tr>
                            <td>图书编号</td>
                            <td>图书名称</td>
                            <td>作者</td>
                            <td>出版社</td>
                        </tr>`;
            $("#head").html(str);
            $.ajax({
                url:"/category/findBook/"+$(this).val(),
                type:"get",
                success:function(data){
                    $.each(data,function (index,val) {
                        str = `<tr>
                                    <td>${val.number}</td>
                                    <td>${val.name}</td>
                                    <td>${val.author}</td>
                                    <td>${val.press}</td>
                                </tr>`;
                        $("#body").append(str);
                    })
                }

            })
        });
        $("#bookname").change(function () {
            $.ajax({
                url:"/category/findType/"+$(this).val(),
                type:"get",
                success:function (data) {
                    // console.log(data)

                    $(".table").html("<h2>"+data+"</h2>")
                }
            })
        })

    });
    
    function deleteCate(id){
        $.ajax({
            url:"/category/delete/"+id,
            type:"delete",
            dataType:"json",
            success:function(data){
                if (data.code==200){
                    alert("删除成功")
                    location.reload()
                }
            }
        })
    }
</script>
</html>